<template>
  <el-container class="app-layout">
    <!-- 头部 -->
    <AppHeader
      :show-menu-button="true"
      :show-search="true"
      @toggle-sidebar="handleToggleSidebar"
    />

    <el-container class="main-container">
      <!-- 侧边栏 -->
      <AppSidebar
        :collapsed="sidebarCollapsed"
        @toggle-collapse="handleToggleSidebar"
      />

      <!-- 主内容区 -->
      <el-main class="app-main">
        <transition name="fade" mode="out-in">
          <slot />
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import AppHeader from './AppHeader.vue'
import AppSidebar from './AppSidebar.vue'
import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()

// 状态
const sidebarCollapsed = ref(false)

// 方法
const handleToggleSidebar = () => {
  sidebarCollapsed.value = !sidebarCollapsed.value
  localStorage.setItem('sidebarCollapsed', sidebarCollapsed.value)
}

// 初始化
onMounted(async () => {
  // 恢复侧边栏状态
  const savedCollapsed = localStorage.getItem('sidebarCollapsed')
  if (savedCollapsed !== null) {
    sidebarCollapsed.value = JSON.parse(savedCollapsed)
  }
  
  // 初始化认证状态
  await authStore.initAuth()
})
</script>

<style scoped>
.app-layout {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

.main-container {
  height: calc(100vh - 60px);
  display: flex;
  flex: 1;
}

.app-main {
  padding: 0;
  overflow-y: auto;
  background: #f5f7fa;
  flex: 1;
}

/* 页面过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .app-main {
    padding: 0;
  }
}
</style>

<style>
/* 全局样式确保Element Plus组件正确布局 */
.el-container.app-layout {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  width: 100vw !important;
}

.el-container.main-container {
  display: flex !important;
  flex: 1 !important;
  height: calc(100vh - 60px) !important;
}

.el-aside {
  height: 100% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.el-main.app-main {
  flex: 1 !important;
  padding: 0 !important;
  overflow-y: auto !important;
  background: #f5f7fa !important;
}

.el-header {
  padding: 0 !important;
  height: 60px !important;
}
</style>